<template>
  <div>
    <!-- <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul> -->

    
    <todo-list :items="items"></todo-list>

    <edit></edit>
  </div>
</template>

<script>
import todoList from '../components/todolist.vue'
import edit from '../components/edit.vue'

    export default {
        name: 'hello',
        data () {
            return {
                items: [
                    {
              "title": "TODOList",
              "content": "数据1",
              "date": "2017年9月19日 20:38"
            },{
              "title": "数据2",
              "content": "webpack+vue+vue-resource",
              "date": "2017年8月7日 20:38"
            }, {
              "title": "数据3",
              "content": "利用bus.js",
              "date": "2017年9月19日 20:38"
            }
                ]
            }
        },
        components: {
          todoList,edit
        }
        // mounted () {
        //     this.list = []
        // }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
html{    font-size: 25.6px;}
    h1,
    h2 {
        font-weight: normal;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    li {
        display: inline-block;
        margin: 0 10px;
    }
    
    a {
        color: #42b983;
    }
</style>